import React, {useEffect, useState} from "react";
import {Image, Table, Button, Space, Popconfirm} from "antd";

import {getBannerList, deleteBanner} from '../../api/banner'

const Com = (props) => {
  const columns = [
    {
      title: '序号',
      render(text, record, index) {
        return <span>{index + 1}</span>
      }
    },
    {
      title: '图片',
      dataIndex: 'img',
      render(text, record, index) {
        return <Image src={text} width={200}/>
      }
    },
    {
      title: '连接',
      dataIndex: 'link'
    },
    {
      title: '提示',
      dataIndex: 'alt'
    },
    {
      title: '操作',
      render(text, record, index) {
        return (
            <Popconfirm
                title='确定删除吗'
                onConfirm={() => {
                  deleteBanner({bannerid: record.bannerid}).then(res => {
                    console.log(res)
                    getBannerList().then( res => {
                      setBannerList( res.data )
                    } )
                  })
                }}
                onCancel={()=>{}}
                okText='确定'
                cancelText='取消'
                >
                <Button danger>删除</Button>
            </Popconfirm>
        )
      }
    },
  ]
  const [bannerList, setBannerList] = useState( [] )
  useEffect( () => {
    getBannerList().then( res => {
      console.log( res )
      setBannerList( res.data )
    } )
  }, [] )
  return (
      <Space direction="vertical" style={{ width: '100%'}}>
        <Button
            type="primary"
            style={{ marginBottom: '10px'}}
            onClick = { () => {
              // console.log(props)
              props.history.push('/banner/add')
            }}
        >
          添加轮播图
        </Button>
        <Table dataSource={bannerList} columns={columns} rowKey = "bannerid"/>
      </Space>
  )
}
export default Com
